<template>
    <div class="login-container">
      <el-form
        ref="loginForm"
        :model="loginForm"
        :rules="rules"
        label-width="0"
        class="login-form"
      >
        <h2 class="login-title">欢迎登录</h2>
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            placeholder="请输入用户名"
            class="login-input"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            placeholder="请输入密码"
            class="login-password"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="handleSubmit" class="login-button">
            登录
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="goToRegister" class="signin-button">
            注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Login',
    data() {
      return {
        loginForm: {
          username: '',
          password: '',
        },
        lrules: {
          username: [
            {
              required: true,
              message: '请输入用户名',
              trigger: 'blur',
            },
            {
              pattern: /^1[3-9]\d{9}$/,
              message: '手机号格式不正确',
              trigger: 'blur',
            },
          ],
          password: [
            {
              required: true,
              message: '请输入密码',
              trigger: 'blur',
            },
            {
              min: 6,
              max: 32,
              message: '密码长度应该为6-32位之间',
              trigger: 'blur',
            },
          ],
        },
      }
    },
    methods: {
      handleSubmit() {
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            // 登录逻辑
            console.log('登录成功')
          } else {
            console.log('登录失败')
            return false
          }
        })
      },
      goToRegister() {
        this.$router.push('/sign')
      },
    },
  }
  </script>
  
  <style scoped>
  .login-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(135deg, #667eea, #764ba2);
  }
  
  .login-form {
    width: 300px;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  .login-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 24px;
    color: #333;
  }
  
  .login-input {
    width: 100%;
    border-radius: 5px;
  }
  
  .login-password {
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;
  }
  
  .login-button {
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;
  }
  
  .signin-button {
    width: 100%;
    border-radius: 5px;
    margin-top: 10px;
  }
  </style>
  